<template>
	<view class="wrapper">
		<scroll-view scroll-x="true" class="type-filtering">
			<view class="type-btn" :class="{active: item.isSelect}" v-for="(item, index) in typeList" @click="switchingSelection(item)">
				{{item.label}} 
			</view>
		</scroll-view>
		<view class="scroll-y-box">
			<view class="table-head">
				<view class="type">黄金9数量</view>
				<view class="time">时间</view>
				<view class="seconds">平均出杆时间</view>
			</view>
			<scroll-view scroll-y="true" class="main-content">
				<view class="table-list">
					<view class="item" v-for="(item, index) in 20" :key="index">
						<view class="type">8</view>
						<view class="time">2024-07-10</view>
						<view class="seconds">9s</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					label: '炸清榜',
					type: 1,
					isSelect: true,
				},{
					label: '接清榜',
					type: 2,
					isSelect: false,
				},{
					label: '大金榜',
					type: 3,
					isSelect: false,
				},{
					label: '小金榜',
					type: 4,
					isSelect: false,
				},{
					label: '黄金9榜',
					type: 5,
					isSelect: false,
				}],
			}
		},
		methods: {
			switchingSelection(item){
				this.typeList.forEach((item, index) => {
					item.isSelect = false;
				})
				item.isSelect = true;
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		.type-filtering{
			width: 90vw;
			height: 100upx;
			line-height: 100upx;
			margin: 0 auto;
			background: #77b8fc;
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			padding-left: 20upx;
			.type-btn{
				display: inline-block;
				margin-right: 40upx;
				background: #ffffff;
				border-radius: 10upx;
				font-size: 30upx;
				color: #666;
				height: 50upx;
				line-height: 50upx;
				padding: 0 20upx;
			}
			.active{
				background: #3597fa;
				color: #ffffff;
			}
		}
		.scroll-y-box{
			padding: 0 20upx;
			.table-head{
				width: calc(100vw - 40upx);
				height: 90upx;
				line-height: 90upx;
				display: flex;
				.type,.time,.seconds{
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.type{
					flex: 1;
				}
				.time{
					flex: 2;
				}
				.seconds{
					flex: 1;
					white-space: nowrap;
				}
			}
			.main-content{
				width: calc(100vw - 40upx);
				height: calc(100vh - 100upx - 90upx);
				.table-list{
					width: 100%;
					.item{
						width: 100%;
						height: 80upx;
						line-height: 80upx;
						display: flex;
						.type,.time,.seconds{
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.type{
							flex: 1;
						}
						.time{
							flex: 2;
						}
						.seconds{
							flex: 1;
						}
					}
				}
			}
		}
	}

</style>
